import React, { useEffect } from 'react'

import { Avatar } from 'antd-mobile'
import { Flex } from 'antd'

import styles from './index.module.css'



function ServiceChat(props) {

    const url = 'https://img.mp.sohu.com/upload/20170731/30c981127cba498ea74b9685fed2160e_th.png';

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    return (
        <div >
            <Flex style={{ 'width': '96vw' }} justify={'flex-start'} align={'flex-start'}>
                <Avatar style={{ 'marginLeft': '10px', width: '32px', height: '32px' }} src={url} />
                <span style={{ 'width': '80vw', 'color': '#000000A6', 'marginLeft': '10px' }}>{props.content}</span>
            </Flex>
        </div>



    )
}

export default ServiceChat;
